<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: unset !important;
		padding: 0 2px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #555 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 13px !important;
		width: 80px !important;
	}

	.commonBg {
		background: #fff;
		border: 1px solid#ddd;
		border-radius: 8px;
		width: 30px;
		height: 30px;
		font-size: 12px;
		text-align: center;
		line-height: 30px;
		position: relative;
	}

	.dot1 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4475f3;
	}

	.dot2 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fb8981;
	}

	.dotLabel {
		margin-right: 5px;
		color: #999;
		font-size: 10px;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}
</style>
<template>
	<div style="height: 100%;">

		<div style="background: #fff;padding: 10px;border-radius: 8px;">
			<div class="displayFlexBet"
				style="background: #fff;margin-bottom: 10px;border-bottom:1px solid#EDECF1;padding-bottom:10px">
				<div class="displayFlex">
					<div class="font16 mr20" style="font-weight: bold;">日常巡检</div>

					<div class="date-item displayFlex">
						<el-select v-model="params.outletId" filterable remote placeholder="选择排口" disabled
							@change="getList(),getListByOutletId()">
							<el-option v-for="item in outletList" :key="item.id" :label="item.gasOutletName"
								:value="item.id" />
						</el-select>
						<i class="el-icon-caret-bottom" style="margin-bottom: 6px;"></i>
					</div>

					<div class="date-item displayFlex">
						<el-date-picker v-model="params.monthDateCheck" type="month" placeholder="选择月" size="mini"
							@change="getList(),getListByOutletId()" value-format="yyyy-MM" style="width: 80px;">
						</el-date-picker>
						<i class="el-icon-caret-bottom" style="margin-bottom: 6px;"></i>
					</div>
				</div>
				<div class="displayFlex">
					<div class="displayFlex" style="margin-right: 15px;">
						<div
							style="background: #CCDDEF;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
							<img src="@/assets/sIcon70.png"
								style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						</div>
						<span class="dotLabel">正常</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<div
							style="background: #F5DCA0;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
							<img src="@/assets/sIcon75.png"
								style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						</div>
						<span class="dotLabel">异常</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<div
							style="background: #F2F2F2;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
							<img src="@/assets/sIcon71.png"
								style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						</div>
						<span class="dotLabel">不生产</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon72.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">没做台账</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon74.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">巡检</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon76.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">有副产</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon73.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">添加药剂</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon77.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">在线监测预警</span>
					</div>
				</div>
			</div>

			<div>
				<div style="flex-wrap: wrap;display: flex;">
					<div v-for="(item,index) in dayList" :key="index" @click="previewGasStandingBook(item)"
						style="width: calc(10% - 10px);margin: 5px;padding: 10px;border-radius: 8px;color: #555;position: relative;text-align: center;background: #fff;"
						:style="{'background':item.bg}">
						<div class="displayFlexBet mb10">
							<div style="font-size: 12px;">{{item.dateStr}}</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 4px;padding: 2px 0;">
								<img v-if="item.workStatus == null" src="@/assets/sIcon72.png"
									style="width: 20px;height: 20px;" />
							</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 4px;padding: 2px 0;">
								<img v-if="item.isInspect" src="@/assets/sIcon74.png"
									style="width: 20px;height: 20px;" />
							</div>
						</div>

						<div class="displayFlexBet">
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 4px;padding: 2px 0;">
								<img v-if="item.wasteProduction == 'HW_WASTE_PRODUCE'" src="@/assets/sIcon76.png"
									style="width: 20px;height: 20px;" />
							</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 4px;padding: 2px 0;">
								<img v-if="item.isMaterialChange" src="@/assets/sIcon73.png"
									style="width: 20px;height: 20px;" />
							</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 4px;padding: 2px 0;">
								<img v-if="item.wasteProduction == 'warningExist'" src="@/assets/sIcon77.png"
									style="width: 20px;height: 20px;" />
							</div>
						</div>

						<img v-if="item.workStatus =='NORMAL'" src="@/assets/sIcon70.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						<img v-else-if="item.workStatus =='ABNORMAL'" src="@/assets/sIcon75.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						<!-- <img v-else-if="item.workStatus =='NOT_PRODUCE'" src="@/assets/sIcon71.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" /> -->
						<img v-else-if="item.workStatus =='NOT_PRODUCE'" src="@/assets/sIcon71.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />

						<div class="displayFlex" style="justify-content: center;margin-top: 10px;"
							v-if="item.wasteProduction">
							<div v-if="item.wasteProduction == 'HW_WASTE_PRODUCE'" class="dot1" />
							<div v-if="item.materialRenewal == 'MATERIAL_RENEWAL'" class="dot2"
								style="margin-left: 3px;" />
						</div>
					</div>
				</div>
			</div>
		</div>


		<div style="background: #fff;border-radius: 16px;padding: 10px;" class="mt10"
			v-if="defenceList && defenceList.length > 0">
			<div style="padding: 10px;margin-bottom: 10px;color: #999;display: inline-block;cursor: pointer;">
				<div v-for="(item,index) in defenceList" :key="index" @click="formLineData(item)"
					:class="[item.defenceId == params.defenceId?'defenceSelectClass':'']"
					style="display: inline-block;margin-right: 20px;">
					{{item.defenceName}}
				</div>
			</div>
			<div v-for="(item,index) in parameterAmountList" :key="index" :id="'lineChart'+index"
				style="width: 100%;height: 300px;margin-bottom: 20px;border-radius: 16px;padding: 20px 0;" />
		</div>

		<previewGasStandingBook ref="previewGasStandingBook" v-if="params.outletId" :outletId="params.outletId"
			@success="getGasOutletBaseList" :showBottom="false" />

	</div>
</template>


<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	import previewGasStandingBook from '@/components/wasteGas/previewGasStandingBook'
	let that

	export default {
		components: {
			previewGasStandingBook
		},
		props: ['outletId'],
		data() {
			return {
				params: {
					outletId: '',
					outleName: '',
					monthDate: moment().format('YYYY-MM-DD'),
					monthDateCheck: moment().format('YYYY-MM'),
					defenceId: ''
				},

				dayList: [],
				outletList: [],
				defenceList: [],
				parameterAmountList: [],
			}
		},
		mounted: function() {
			that = this

			console.log(that.outletId)
			that.params.ticketId = that.$store.state.token
			that.params.outletId = that.outletId
			that.getGasOutletBaseList()

		},
		methods: {

			makeOrder() {
				this.$confirm('请前往手机端制作台账?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {}).catch(() => {});
			},

			//预览制作台账
			previewGasStandingBook(item) {
				that.$refs.previewGasStandingBook.open(that.params.outletId, item)
			},

			showXunJianRecord() {
				that.$refs.xunjianHis.open(that.params.outletId, that.params.monthDateCheck)
			},

			gotoDet() {
				that.$router.push("/wasteGas/orderDet?ticketId=" + that.params.ticketId + "&monthDate=" + that.params
					.monthDateCheck + "&outletId=" + that.params.outletId)
			},

			getGasOutletBaseList() {
				that.ajax({
					url: '/gasOutlet/getGasOutletBaseList?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
						//gasOutletApproach: "ORGANIZED_OUTLET"
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.outletList = result.data
							if (!that.params.outletId) {
								if (that.outletList && that.outletList.length > 0) {
									that.params.outletId = that.outletList[0].id
									that.params.outleName = that.outletList[0].waterOutletName
								}
							}
							that.getList()
							that.getListByOutletId()
						}
					},
				})
			},

			getListByOutletId() {
				that.ajax({
					url: '/gasOutletLine/getDefenceListByOutletId',
					data: {
						outletId: that.params.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data && result.data.length > 0) {
							that.defenceList = result.data
							that.params.defenceId = result.data[0].defenceId
							that.formLineData()
						} else {
							that.defenceList = []
						}
					},
				})
			},

			getList: function(value) {
				if (value) {
					let thisIndex = that.outletList.findIndex(item => item.outletId == value)
					if (thisIndex != -1) {
						that.params.outleName = that.outletList[thisIndex].gasOutletName
					}
				}
				var _this = this;
				var param = JSON.parse(JSON.stringify(_this.params));
				param.monthDate = param.monthDateCheck + "-01"
				that.ajax({
					url: '/gasOutlet/getGasOutletDateStandingBookList?ticketId=' + that.params.ticketId,
					dataType: 'json',
					data: JSON.stringify(param),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.workStatus == 'NORMAL') {
								item.bg = '#CCDDEF'
							} else if (item.workStatus == 'ABNORMAL') {
								item.bg = '#F5DCA0'
							} else {
								//item.bg = '#fff'
								item.bg = "#F2F2F2 "
							}
						}
						that.dayList = result.data
					}
				})
			},

			//导出危废台账
			exportExcle() {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				let temp = that.params.monthDateCheck;
				window.open('https://www.weifeibangbang.com/gasOutlet/createGasStandBookExcel?outletId=' +
					that.params.outletId + "&monthDate=" + temp + '&ticketId=' + that.params.ticketId)
				loading.close();
			},

			async formLineData(item) {
				if (item && item.defenceId) that.params.defenceId = item.defenceId

				function getParameterAmountListByDefenceId() {
					return new Promise((resolve, reject) => {
						var param = JSON.parse(JSON.stringify(that.params));
						param.recordDate = param.monthDateCheck + "-01"
						that.ajax({
							url: '/gasInspect/getParameterAmountListByDefenceId',
							dataType: 'json',
							data: JSON.stringify(param),
							contentType: 'application/json',
							success: function(result) {
								resolve(result.data)
							}
						})
					})
				}

				let dataList = await getParameterAmountListByDefenceId()
				that.parameterAmountList = dataList
				setTimeout(function() {
					for (let key in dataList) {
						let chartDom = document.getElementById('lineChart' + key);
						let myChart = echarts.init(chartDom);
						let option;
						let thisData = dataList[key]

						let series = [{
							name: thisData.parameterName,
							type: 'line',
							data: [],
						}]

						let xSeries = []
						for (let item of thisData.list) {
							xSeries.push(item.dateStr)
							series[0].data.push(item.amount || 0)
						}


						option = {
							tooltip: {
								trigger: 'item',
								axisPointer: {
									type: 'shadow'
								}
							},
							grid: {
								top: "12%",
								bottom: "10%",
								left: "5%"
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: xSeries,
								splitLine: {
									show: false,
								},
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLine: {
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							yAxis: {
								name: thisData.parameterName,
								type: 'value',
								splitLine: {
									show: true,
									lineStyle: {
										color: ["#FAFBFC"],
									},
								},
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLabel: {
									//y轴文字的配置
									textStyle: {
										color: "rgba(215, 215, 215, 1)",
									},
									// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
								},
								axisLine: {
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							dataZoom: [{
									type: 'inside',
									start: 0,
									end: 20
								},
								{
									start: 0,
									end: 20
								}
							],
							series: series
						};

						option && myChart.setOption(option);
					}
				}, 1000)
			},
		}
	}
</script>